<template>
	<view style="order:999999999;">
		<view class="position"></view>
		<view class="position-button">
			<view
				class="_for"
				v-for="item in Item"
				@click="$_To(item.url)">
				<view
					class="_for-icon"
					:style="'background:'+item.backgroundColor+';border-radius:'+item.borderRadius+';'">
					<text
						:style="item.iconfontCss"
						:class="'iconfont '+item.iconfont"></text>
				</view>
				<view
					class="text"
					:style="item.textCss">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"block-tail-button",
		props:{
			Item:{
				type:Array,
				default:null
			}
		}
	}
</script>

<style lang="scss" scoped>
.position{
	width: 100%;
	height: 210rpx;
}
.position-button{
	width: 100%;
	height: 210rpx;
	background: #FFF;
	border-top: 1rpx solid $BianKuangSe;
	position: fixed;
	z-index: 999;
	left: 0;
	bottom:var(--window-bottom);
	box-shadow: 10px 10px 20px #999;
	display: flex;
	justify-content: center;
	align-items: center;
	._for{
		width: 120rpx;
		margin: 0 12.5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		._for-icon{
			width: 120rpx;
			height: 120rpx;
			background: #CCC;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
		}
		.text{
			line-height: 24rpx;
			font-size: 24rpx;
			padding-top: 15rpx;
		}
	}
}
</style>